<template>
  <page-container :title="route.meta.title">
    <div class="address-mamagement">
      <a-card :bordered="false">
        <a-alert message="tip：此地址信息用于自动化业务流程中发货同意退款等操作。" type="info" show-icon />
        <div class="fish-account">
          <div class="key">闲鱼账号：</div>
          <!-- allowClear -->
          <a-select v-model:value="okRobat" @change="selectRobat" placeholder="请选择"
            style="width: 300px; text-align: left" show-search :options="optionList" :filter-option="filterOption">
            <a-select-option v-for="(item, index) in optionList" :key="index" :value="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
        </div>
        <div class="item">
          <div class="row1">
            <div class="key">发货信息：</div>
            <CascaderCom @onSelected="getPcd" v-model="selectedPcd1"></CascaderCom>
            <div style="width: 20px"></div>
            <a-input v-model:value.lazy="addressInfo.shipAddress" style="width: 300px; text-align: left" autofocus
              placeholder="详细地址" />
          </div>
          <div class="row2">
            <a-input v-model:value="addressInfo.shipName" style="width: 200px; text-align: left" placeholder="姓名" />
            <div style="width: 20px"></div>
            <a-input v-model:value.lazy="addressInfo.shipPhone" style="width: 200px; text-align: left" autofocus
              placeholder="手机号" />
          </div>
        </div>
        <div class="item">
          <div class="row1">
            <div class="key">退货信息：</div>
            <CascaderCom @onSelected="getPcd1" v-model="selectedPcd2"></CascaderCom>
            <div style="width: 20px"></div>
            <a-input v-model:value.lazy="addressInfo.refundTown" style="width: 300px; text-align: left" autofocus
              placeholder="详细地址" />
          </div>
          <div class="row2">
            <a-input v-model:value="addressInfo.refundName" style="width: 200px; text-align: left" placeholder="姓名" />
            <div style="width: 20px"></div>
            <a-input v-model:value.lazy="addressInfo.refundPhone" style="width: 200px; text-align: left" autofocus
              placeholder="手机号" />
          </div>
        </div>

        <div style="margin-top: 50px">
          <span>选择推送闲鱼账号：</span>
          <a-select v-model:value="groupId" @change="selectGroup" placeholder="请选择分组"
            style="width: 12%; text-align: left">
            <a-select-option v-for="(item, index) in groupList" :key="index" :value="item.id">
              {{ item.groupName }}
            </a-select-option>
          </a-select>
          <a-select mode="multiple" v-model:value="sendRobat" @change="selectSendRobat" placeholder="请选择店铺"
            style="width: 20%; text-align: left; margin-left: 5px" allowClear show-search :options="optionList"
            :filter-option="filterOption">
            <a-select-option v-for="(item, index) in optionList" :key="index" :value="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
          <a-button type="primary" style="margin-left: 10px; border-radius: 6px" @click="sendOk">
            确认推送
          </a-button>
        </div>
      </a-card>
    </div>
  </page-container>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { timeFormat, timeFormat_2, toYuan, copyToCliboard, getNowDay } from '@/hooks/util'
import * as accountApi from '@/api/account'
import * as addressApi from '@/api/address'
import CascaderCom from '@/components/cascaderCompoents/index.vue'
import { message } from 'ant-design-vue'

const route = useRoute()
// let okRobat = ref<string | number>()

let selectedPcd1 = ref([])
let selectedPcd2 = ref([])

const selectRobat = (selectValue: unknown) => {
  okRobat.value = selectValue as string
  getFishConfigData()

  //   searchParams.value.robotId = selectValue as string
}
// let options = ref<Array>([])
interface OptionList {
  label: string
  value: string
}
let optionList = ref<Array<OptionList>>([])
// let robatList = ref<Array<OptionList>>([])

interface ShippingInformation {
  name: string
  phone: string
  detailAddress: string
  province: string | number
  city: string | number
  district: string | number
}
interface ReturnInformation {
  name: string
  phone: string
  detailAddress: string
  province: string | number
  city: string | number
  district: string | number
  address: string | number[]
}
let shipInfo = reactive<ShippingInformation>({
  name: '',
  phone: '',
  detailAddress: '',
  province: '',
  city: '',
  district: '',
  address: '',
})
let returnInfo = reactive<ReturnInformation>({
  name: '',
  phone: '',
  detailAddress: '',
  province: '',
  city: '',
  district: '',
})

const addressInfo = ref({
  id: 0,
  refundArea: '',
  refundCity: '',
  refundName: '',
  refundPhone: '',
  refundProvince: '',
  refundTown: '',
  shipAddress: '',
  shipArea: '',
  shipCity: '',
  shipName: '',
  shipPhone: '',
  shipProvince: '',
})
const shipArr = ref([])
const redundArr = ref([])

//收货
const getPcd = e => {
  console.log(e, 'e')
  shipArr.value = e
}
//退货
const getPcd1 = e => {
  console.log(e, 'e')
  redundArr.value = e
}
//获取配置
const getFishConfigData = async () => {
  try {
    const {
      state,
      data,
      message: msg,
    } = await addressApi.getFishConfigData({
      robotId: okRobat.value,
    })
    if (state === 200) {
      addressInfo.value = data
      if (data.shipAreaInfo) {
        selectedPcd1.value = [
          {
            value: data.shipAreaInfo.province,
            label: data.shipAreaInfo.provinceName,
          },
          {
            value: data.shipAreaInfo.city,
            label: data.shipAreaInfo.cityName,
          },
          {
            value: data.shipAreaInfo.area,
            label: data.shipAreaInfo.areaName,
          },
        ]
      }
      if (data.refundAreaInfo) {
        selectedPcd2.value = [{
          value: data.refundAreaInfo.province,
          label: data.refundAreaInfo.provinceName,
        },
        {
          value: data.refundAreaInfo.city,
          label: data.refundAreaInfo.cityName,
        },
        {
          value: data.refundAreaInfo.area,
          label: data.refundAreaInfo.areaName,
        },]
      }

      // selectedPcd1.value = [data.shipProvince, data.shipCity, data.shipArea]



      // selectedPcd2.value = [data.refundProvince, data.refundCity, data.refundArea]
    } else {
      message.error(msg)
    }
  } catch (err) {
    console.log(err, "err");

    message.error('网络请求连接失败~')
  }
}
const getRobatList = async () => {
  try {
    let {
      state,
      data,
      message: msg,
    } = await accountApi.getFishRobotList({
      currentPage: 1,
      pageSize: 100,
    })
    if (state === 200) {
      robatList.value = data.list
      optionList.value = data.list.map((item: any) => {
        return {
          label: item.nickName,
          value: item.id,
        }
      })
      selectRobat(optionList.value[0].value)

      // optionList.value.unshift({
      //   label: '全部',
      //   value: '1',
      // })
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
const getProvinceList = async (parentId: any) => {
  try {
    let { state, data, message: msg } = await addressApi.getChannelAreaList({ parentId })
    if (state === 200) {
      options.value = data.map((item: any) => {
        return {
          value: item.id,
          label: item.name,
          children: [],
        }
      })
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}

onMounted(() => {
  getRobatList()
  getProvinceList(0)
})
let okRobat = ref<string>()
import type { SelectProps } from 'ant-design-vue'
const robatList = ref<SelectProps['options']>([])
const groupList = ref<SelectProps['options']>([])
const groupId = ref<string>()

const options = ref<SelectProps['options']>([])
const getGroupList = async () => {
  try {
    let { state, data, message: msg } = await accountApi.getFishRobotGroupList()
    if (state === 200) {
      groupList.value = data
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
const sendData = ref<Array<any>>([])
let sendRobat = ref<Array<string>>()
const selectSendRobat = (selectValue: any) => {
  sendRobat.value = selectValue
}
const selectGroup = (selectValue: unknown) => {
  groupId.value = selectValue as string
  sendRobat.value = options.value
    .filter(item => item.groupId == groupId.value)
    .map(element => element.id)
}

const sendOk = () => pushRobot()

const pushRobot = async () => {
  console.log(addressInfo.value, 'addressInfo.value')
  if (!sendRobat.value) {
    message.error('请选择机器人')
    return
  }

  if (selectedPcd1.value.length) {
    addressInfo.value.shipProvince = selectedPcd1.value[0].value || ''
    addressInfo.value.shipCity = selectedPcd1.value[1].value || ''
    addressInfo.value.shipArea = selectedPcd1.value[2].value || ''
  } else {
    addressInfo.value.shipArea = shipArr.value[2].value || ''
    addressInfo.value.shipCity = shipArr.value[1].value || ''
    addressInfo.value.shipProvince = shipArr.value[0].value || ''
  }
  if (selectedPcd2.value.length) {
    addressInfo.value.refundProvince = selectedPcd2.value[0].value || ''
    addressInfo.value.refundCity = selectedPcd2.value[1].value || ''
    addressInfo.value.refundArea = selectedPcd2.value[2].value || ''
  } else {
    addressInfo.value.refundArea = redundArr.value[2].value || ''
    addressInfo.value.refundCity = redundArr.value[1].value || ''
    addressInfo.value.refundProvince = redundArr.value[0].value || ''
  }

  console.log(addressInfo.value, 'addressInfo.value')

  // return

  try {
    let { state, message: msg } = await addressApi.pushAddressConfig({
      fishConfigDTO: addressInfo.value,
      // pushRobotId: okRobat.value,
      robotIds: sendRobat.value,
    })
    if (state === 200) {
      message.success('推送成功')
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
// select搜索
const filterOption = (input: string, option: any) => {
  return option.label.indexOf(input) >= 0
}
</script>
<style scoped lang="less">
.address-mamagement {
  .fish-account {
    display: flex;
    align-items: center;
    margin-top: 20px;

    .key {
      width: 80px;
      text-align: left;
    }
  }
}

.item {
  margin-top: 20px;

  .row1 {
    display: flex;
    align-items: center;

    .key {
      width: 80px;
      text-align: left;
    }
  }

  .row2 {
    margin-top: 25px;
    display: flex;
    align-items: center;
    margin-left: 80px;
  }
}
</style>
